<template>
	<view class="content">
		<view class="bgColor">
		</view>
		<view class="header">

			<view class="list">
				<view class="listLeft">
					选择问题分类：
				</view>
				<view class="listCont" style="display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;">
					<!-- <picker mode="selector" :range="navList" :range-key="'name'" :value="selectedIndex"
						@change="onPickerChange">
						<view class="picker">
							{{ selectedOption }}
						</view>
					</picker> -->
					<view class="listNav" v-for="(item, index) in navList" @click="chooseNav(index)" :key="index" :class="navIndex==index?'listNavA':''">
						{{item.name}}
					</view>
					<!-- <u-radio-group v-model="selectedOption" @change="radioGroupChange">
								<u-radio 
									@change="radioChange" 
									v-for="(item, index) in navList" :key="index" 
									:name="item.name"
									:disabled="item.disabled"
								>
									{{item.name}}
								</u-radio>
							</u-radio-group> -->
				</view>
				<view class="" style="color: #999999;">
					{{titleRemark}}
				</view>
			</view>
			<view class="list">
				<view class="listLeft">
					内容：
				</view>
				<view class="listCont">
					<u-input v-model="value" :type="type" :border="border" :height="height" :auto-height="autoHeight" />
				</view>
			</view>
			<view class="list">
				<view class="listLeft">
					录音：
				</view>
				<view class="listCont">
					<view class="wx-voice-container" :class="{ 'playing': isPlaying }" @click.stop="bofang" v-if="audioUrl">
					      <view class="wx-voice-icon">
					        <view class="wx-voice-circle"></view>
					        <view class="wx-voice-bar"></view>
					        <view class="wx-voice-bar"></view>
					        <view class="wx-voice-bar"></view>
					      </view>
					    </view>
					<!-- <view class="audioBox" @click="bofang" v-if="audioUrl">
						<u-icon :name="playRight" color="#2979ff" size="28"></u-icon>
					</view> -->
					<button type="primary" @click="show = true">语音录制</button>
				</view>
			</view>
			<view class="list">
				<view class="listLeft">
					图片上传：
				</view>
				<view class="listCont">
					<view class="upImage">
						<view class="upImageLi" v-for="(item,index) in imageList" :key="index" @click="yulan(item)">
							<image :src="item" mode=""></image>
							<view class="box-photo-del" @click.stop="deletePhoto(index)">
								<image src="/static/dels.jpg" mode=""></image>
							</view>
						</view>
						<view class="upImageLi" @click="upLoad">
							<u-icon name="plus-circle" color="#999999" size="55"></u-icon>
							<view class="upImageLiName">
								图片
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="list">
				<view class="listLeft">
					视频上传：
				</view>
				<view class="listCont">
					<view class="upImage">
						<view class="upImageLi" v-for="(item,index) in audioList" :key="index" @click="yulan(item)">
							<video :src="item" style="width: 100%;height: 100%;border-radius: 16rpx;"></video>
							<view class="box-photo-del" @click.stop="deleteVideo(index)">
								<image src="/static/dels.jpg" mode=""></image>
							</view>
						</view>
						<view class="upImageLi" @click="videoImage">
							<u-icon name="plus-circle" color="#999999" size="55"></u-icon>
							<view class="upImageLiName">
								视频
							</view>
						</view>
					</view>
				</view>
			</view>
			<view style="margin-top: 20rpx;">
				<map id="map" class="map" :show-location="true" :latitude="latitude" :longitude="longitude"
					:markers="covers" :scale="scale"></map>
			</view>

			<view class="list" @click="gaingetlocation">
				<view class="listLeft">
					位置：
					<image src="/static/dingwei.png" mode="" style="width: 40rpx;height: 40rpx;"></image>
				</view>
				<view class="listCont">
					{{cityName}}
				</view>
			</view>
			<view class="btn" @click="submit()">
				提交
			</view>
		</view>
		<!-- 底部导航栏 -->
		<view class="tabbarBox">
			<view class="tabbar">
				<view class="tabbar-item" @click="toUrl('/pages/index/index')">
					<view class="tabbar-image">
						<image src="/static/tabbar/home.png" mode="" style="width: 57.22rpx;height: 57.22rpx;">
						</image>
					</view>
					<view class="tabbat-name">
						首页
					</view>
				</view>
				<view class="tabbarZj">
					<view class="tabbarZjCont">
						<u-icon name="camera" color="#ffffff" size="40"></u-icon>
						<view class="tabbarZjContText">
							随手拍
						</view>
					</view>
				</view>
				<view class="tabbar-item" @click="toUrl('/pages/mine/mine')">
					<view class="tabbar-image">
						<image src="/static/tabbar/mine.png" mode="" style="width: 70rpx;height: 70rpx;"></image>
					</view>
					<view class="tabbat-name">
						我的
					</view>
				</view>
			</view>
		</view>
		<view class="popup-bottom" v-if="show">
		  <view class="popup-bg" @click="show = false"></view>
		  <view class="popup-content">
		    <sound-recording
		      :maximum="60"
		      :duration="100"
		      @cancel="show = false"
		      @confirm="onUpload">
		    </sound-recording>
		  </view>
		</view>
	</view>
</template>

<script>
	const recorderManager = uni.getRecorderManager();
	const innerAudioContext = uni.createInnerAudioContext();
	
	import soundRecording from '@/components/sound-recording/sound-recording.vue'
	import config from '@/config.js'
	export default {
		 components: {soundRecording},
		data() {
			return {
				show: false,
				options: ['Option 1', 'Option 2', 'Option 3'], // 下拉选项列表
				selectedIndex: 0, // 当前选中的下拉选项索引
				value: '',
				titleRemark: '',
				cid: '',
				type: 'textarea',
				border: true,
				height: 100,
				autoHeight: true,
				navList: [],
				imageList: [],
				cityName: "",
				scale: 15, //地图层级
				latitude: '',
				longitude: '',
				covers: [],
				audioUrl:"",
				playRight:'play-right',
				audioList:[],
				selectedOption:"",
				isPlaying:false,
				navIndex:0
			}
		},
		onLoad() {
			this.initData()
		},
		onShow() {
			uni.hideHomeButton()
			this.gaingetlocation()

		},
		// computed: {
		// 	selectedOption() {
		// 		this.cid = this.navList[this.selectedIndex].id
		// 		this.titleRemark = this.navList[this.selectedIndex].remark

		// 		return this.navList[this.selectedIndex].name;
		// 		// 获取当前选中的选项值
		// 	},
		// },
		created() {
			//音频监控
			innerAudioContext.onEnded(res => {
				console.log('语音自然播放结束');
			this.isPlaying = false
			});
		},
		methods: {
			chooseNav(a){
				this.navIndex = a
				this.selectedOption = this.navList[a].name
				this.titleRemark = this.navList[a].remark
				this.cid = this.navList[a].id
			},
			// 选中某个单选框时，由radio时触发
					radioChange(e) {
						console.log(e,1);
						for(var a=0;a<this.navList.length;a++){
							if(this.navList[a].name==e){
								this.selectedOption = this.navList[a].name
								this.titleRemark = this.navList[a].remark
								this.cid = this.navList[a].id
							}
						}
						// this.selectedOption = res.result[0].name
						// this.titleRemark = res.result[0].remark
					},
					// 选中任一radio时，由radio-group触发
					radioGroupChange(e) {
						console.log(e,2);
					},
			// 删除图片
			deleteVideo(index) {
				this.audioList.splice(index, 1)
			},
			bofang(){
				this.isPlaying = !this.isPlaying;
				if(this.isPlaying){
									 innerAudioContext.src = this.audioUrl;
									 innerAudioContext.play();
				}else{
									  innerAudioContext.pause();
				}
				
			},
			videoImage() {
				uni.chooseVideo({
					count: 1,
					sourceType: ['camera', 'album'],
					success: res => {
						console.log(res, '选择的视频')
						// uni.getVideoInfo({
						//   src: res.tempFilePath,
						//   success: image => {
						// console.log(image,'视频信息')
						uni.showLoading({
							title: '视频上传中',
							mask: true
						})
						console.log(res.tempFilePath)
						uni.uploadFile({
							url: config.base_url + 'api/upload',
							// file: image,
							filePath: res.tempFilePath,
							header: {
								token: uni.getStorageSync('token'),
							},
							name: 'file',
							success: res => {
								let a = JSON.parse(res.data)
								if (a.code == 0) {
									this.audioList.push(a.url)
								} else {
									uni.showToast({
										title: a.msg,
										icon: 'none',
										duration: 2000,
									})
								}
							},
							fail: err => {
								uni.showToast({
									title: '上传图片失败',
									icon: 'none',
									duration: 2000,
								})
							},
							complete: res => {
								uni.hideLoading()
							},
						})
						// },
						// fail: err => {
						//   uni.showToast({
						//     title: '获取视频信息失败',
						//     icon: 'none',
						//     duration: 2000,
						//   })
						// },
						// })
					},
				})
			},
			onUpload (tempFilePath) {
			  console.log(tempFilePath)
			  uni.uploadFile({
			  	url: config.base_url + 'api/upload',
			  	// file: image,
			  	filePath: tempFilePath,
			  	header: {
			  		token: uni.getStorageSync('token'),
			  	},
			  	name: 'file',
			  	success: res => {
					this.show = false
					console.log(res)
			  		let a = JSON.parse(res.data)
			  		if (a.code == 0) {
						this.audioUrl = a.url
			  			// this.imageList.push(a.url)
			  		} else {
			  			uni.showToast({
			  				title: a.msg,
			  				icon: 'none',
			  				duration: 2000,
			  			})
			  		}
			  	},
			  	fail: err => {
			  		uni.showToast({
			  			title: '上传图片失败',
			  			icon: 'none',
			  			duration: 2000,
			  		})
			  	},
			  	complete: res => {
			  		uni.hideLoading()
			  	},
			  })
			},
			submit() {
				// this.audioList 视频数据字段
				// this.audioUrl 录音数据字段
				uni.showLoading({
					title:"提交中！"
				})
				this.$ajax.post({
					url: 'api/saveOrUpdateOrder',
					data: {
						latitude :this.latitude,
						longitude:this.longitude,
						cid:this.cid,
						signUrl: this.imageList.join(','),
						msgDetail:this.value,
						address:this.cityName,
						voiceUrl: this.audioUrl,
						videoUrl: this.audioList.join(','),
					},
				}).then((res) => {
					uni.hideLoading()
					if (res.code == 0) {
						 uni.showToast({
						 	title: "提交成功",
						 	icon: 'none',
						 	duration: 2000
						 })
						setTimeout(() => {
							uni.reLaunch({
								url: "/pages/index/index"
							});
						}, 2000)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				});
			},
			initData() {
				this.$ajax.get({
					url: 'api/listCate',
					data: {},
				}).then((res) => {
					if (res.code == 0) {
						for(var a=0;a<res.result.length;a++){
							res.result[a].disabled = false
						}
						this.cid = res.result[0].id
						this.selectedOption = res.result[0].name
						this.titleRemark = res.result[0].remark
						this.navList = res.result
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				});
			},
			onPickerChange(e) {
				this.selectedIndex = e.detail.value; // 更新选中的下拉选项索引
			},
			// 获取用户位置信息
			gaingetlocation() {
				let that = this
				uni.getLocation({
					type: 'gcj02',
					isHighAccuracy: true,
					geocode: true,
					success: function(res) {
						console.log(res)
						that.latitude = res.latitude
						that.longitude = res.longitude
						that.covers = [{
							latitude: res.latitude, //纬度
							longitude: res.longitude, //经度
							iconPath: '/static/address.png', //显示的图标         
							title: '当前位置', //标注点名
							id: 1,
							width: 30,
							height: 30
						}]
						var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
						var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
						let location = latitude + ',' + longitude
						let key = 'OL4BZ-SWWWX-LPW4C-ZPED7-PW7AQ-F4F3V'
						// 由经纬度反解城市信息
						//#ifdef MP-WEIXIN
						uni.request({
							url: 'https://apis.map.qq.com/ws/geocoder/v1/', //仅为示例，并非真实接口地址。
							data: {
								location: location,
								key: key,
								get_poi: 1
							},
							success: (res) => {
								that.cityName = res.data.result.address
							}
						});
						//#endif
						//#ifdef H5
						that.$jsonp(
							`https://apis.map.qq.com/ws/geocoder/v1/?location=${res.latitude},${res.longitude}&key=${key}&output=jsonp`
						).then(res2 => {
							console.log(res2)
							that.cityName = res2.result.address_component.city
						})
						//#endif
					},
					fail: function(res) {
						console.log(res)
						uni.showToast({
							title: '获取地址失败，将导致部分功能不可用',
							icon: 'none'
						});
					}
				});
			},
			// 删除图片
			deletePhoto(index) {
				this.imageList.splice(index, 1)
			},
			// 预览图片
			yulan(item) {
				let array = []
				for (var a = 0; a < this.imageList.length; a++) {
					array.push(this.imageList[a])
				}
				uni.previewImage({
					current:item, // 当前显示图片的 http 链接
					urls: array // 需要预览的图片 http 链接列表
				});
			},
			upLoad() {
				console.log(this.imageList.length)
				if (this.imageList.length >= 3) {
					uni.showToast({
						title: "最多上传三张！",
						duration: 3000
					})
					return
				}
				uni.chooseImage({
					count: 9,
					success: res => {
						console.log(res, 123123123)
						for (let temp of res.tempFilePaths) {
							uni.getImageInfo({
								src: temp,
								success: image => {
									console.log(image)
									uni.showLoading({
										title: '图片上传中',
										mask: true
									})
									uni.uploadFile({
										url: config.base_url + 'api/upload',
										file: image,
										filePath: image.path,
										header: {
											token: uni.getStorageSync('token'),
										},
										name: 'file',
										success: res => {
											let a = JSON.parse(res.data)
											if (a.code == 0) {
												this.imageList.push(a.url)
											} else {
												uni.showToast({
													title: a.msg,
													icon: 'none',
													duration: 2000,
												})
											}
										},
										fail: err => {
											uni.showToast({
												title: '上传图片失败',
												icon: 'none',
												duration: 2000,
											})
										},
										complete: res => {
											uni.hideLoading()
										},
									})
								},
								fail: err => {
									uni.showToast({
										title: '获取图片信息失败',
										icon: 'none',
										duration: 2000,
									})
								},
							})
						}

					},
					fail: function(error) {
						if (error.errMsg === 'chooseImage:fail auth deny') {
							uni.showToast({
								title: '需要获取相册权限才能上传图片',
								icon: 'none'
							})
							uni.openSetting({
								success: function(res) {
									if (res.authSetting['scope.writePhotosAlbum']) {
										// 用户在设置中同意授权相册权限
										// 可以再次调用uni.chooseImage来选择图片
									} else {
										// 用户在设置中仍然拒绝授权相册权限
										uni.showToast({
											title: '未授权相册权限，无法上传图片',
											icon: 'none'
										})
									}
								}
							})
						} else {
							uni.showToast({
								title: '选择图片失败',
								icon: 'none'
							})
						}
					}
				})
			},
			toUrl(urlSrc) {
				uni.switchTab({
					url: urlSrc
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.popup-bottom {
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  z-index: 10;
	  display: flex;
	  flex-direction: column;
	  .popup-bg {
	    position: fixed;
	    left: 0;
	    top: 0;
	    width: 100%;
	    height: 100%;
	    background: rgba(0,0,0,0.5);
	  }
	  .popup-content {
	    height: 40%;
	    margin-top: auto;
	    background-color: #fff;
	    position: relative;
	    z-index: 11;
	  }
	}
	.content {
		padding-bottom: 130rpx;
	}

	.bgColor {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #F4F6F7;
		z-index: -1;
	}

	.picker {
		height: 30px;
		line-height: 25px;
		text-align: center;
		border: 1px solid #ccc;
		border-radius: 5px;
	}

	.map {
		height: 500rpx;
		width: 100%;
	}

	.header {
		padding: 30rpx;

		.list {
			background: #ffffff;
			padding: 20rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			margin-top: 20rpx;

			.listLeft {
				font-size: 30rpx;
				font-weight: bold;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.listCont {
				margin-top: 20rpx;
				.listNav{
					min-width: 300rpx;
					padding: 10rpx 20rpx;
					box-sizing: border-box;
					background: #dedede;
					margin-bottom: 20rpx;
					border-radius: 10rpx;
					text-align: center;
				}
				.listNavA{
					background: #AFD4FE;
					color: #ffffff;
				}
				.audioBox{
					width: 100rpx;
					height: 100rpx;
					background: #ECEAEB;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 10rpx;
					margin-bottom: 20rpx;
				}
				
				.upImage {
					display: flex;
					align-items: center;
					justify-content: space-between;
					flex-wrap: wrap;

					.upImageLi {
						width: 200rpx;
						height: 200rpx;
						background: #ECEAEB;
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						border-radius: 10rpx;
						margin-top: 30rpx;
						position: relative;

						.box-photo-del {
							width: 40rpx;
							height: 40rpx;
							position: absolute;
							top: -10rpx;
							right: -10rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}

						image {
							width: 100%;
							height: 100%;
							border-radius: 10rpx;
						}

						video {
							width: 100%;
							height: 100%;
							border-radius: 10rpx;
						}

						.upImageLiName {
							color: #999999;
							font-size: 28rpx;
							margin-top: 20rpx;
						}
					}
				}

				.upImage::after {
					content: '';
					width: 200rpx;
				}
			}
		}

		.list:first-child {
			margin-top: 0;
		}
	}

	.tabbarBox {
		width: 100%;
		// height: 150rpx;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: flex-end;

		.tabbar {
			width: 100%;
			height: 130rpx;
			background: #F9F9F9;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.tabbar-item {
				// width: 134rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;

				.tabbar-image {

					display: flex;
					align-items: center;
					justify-content: center;

					image {
						width: 77rpx;
						height: 77rpx;
						display: block;
					}
				}

				.tabbat-name {
					font-size: 22rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #848383;
					text-align: center;
					margin-top: 5rpx;
				}
			}

			.tabbarZj {
				margin-top: -30rpx;

				.tabbarZjCont {
					width: 130rpx;
					height: 130rpx;
					border-radius: 50%;
					background: #AFD4FE;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;

					.tabbarZjContText {
						font-size: 22rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #111111;
						text-align: center;
						color: #ffffff;
						margin-top: 10rpx;
					}
				}
			}
		}
	}

	.btn {
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		text-align: center;
		margin-top: 20rpx;
		background: #AFD4FE;
		color: #ffffff;
		border-radius: 40rpx;
	}
	.wx-voice-container {
	  display: flex;
	  align-items: center;
	  background-color: #f5f5f5;
	  padding: 8px;
	  border-radius: 20px;
	  cursor: pointer;
	  transition: background-color 0.3s;
	  margin-bottom: 20rpx;
	}
	
	.wx-voice-container .playing {
	  background-color: #e6e6e6;
	}
	
	.wx-voice-icon {
	  display: flex;
	  align-items: center;
	  position: relative;
	}
	
	.wx-voice-circle {
	  width: 6px;
	  height: 6px;
	  background-color: #333;
	  border-radius: 50%;
	  margin-right: 6px;
	}
	
	.wx-voice-bar {
	  width: 4px;
	  height: 14px;
	  background-color: #333;
	  margin-right: 2px;
	  
	}
	.playing .wx-voice-bar{
		animation: voice-bar-animation 1s infinite;
	}
	.wx-voice-bar:last-child {
	  margin-right: 0;
	}
	
	.wx-voice-duration {
	  font-size: 14px;
	  color: #333;
	  padding-left: 8px;
	}
	
	@keyframes voice-bar-animation {
	  0% {
	    height: 14px;
	  }
	  50% {
	    height: 6px;
	  }
	  100% {
	    height: 14px;
	  }
	}
</style>